import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('Option 1', '/test1', <PieChartOutlined />),
    getItem('Option 2', '/test2', <DesktopOutlined />),
    getItem('User', 'sub1', <UserOutlined />, [
        getItem('Tom', '3'),
        getItem('Bill', '4'),
        getItem('Alex', '5'),
    ]),
    getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    getItem('Files', '9', <FileOutlined />),
];

const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    // 展开的submenu
    const [openKey, setOpenKey] = useState([''])

    // 路由跳转的hook
    const naviGateTo = useNavigate()


    // 处理submenu仅能展开一个
    const handleOpenChange = (keys: string[]) => {
        setOpenKey([keys[keys.length - 1]])
    }


    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="logo" />
                <Menu
                    theme="dark"
                    defaultSelectedKeys={['/test1']}
                    mode="inline"
                    items={items}
                    onClick={(e) => naviGateTo(e.key)}
                    onOpenChange={(keys) => handleOpenChange(keys)}
                    openKeys={openKey}
                />
            </Sider>
            <Layout className="site-layout">

                <Header className="site-layout-background" style={{ padding: 0 }} >
                    <Breadcrumb style={{ lineHeight: '64px', paddingLeft: '16px' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                </Header>

                <Content className="site-layout-background" style={{ margin: '16px 16px 0' }}>
                    <Outlet />
                </Content>

                <Footer style={{ textAlign: 'center', padding: 0, lineHeight: '48px' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
};

export default Home;